import React, {useEffect, useRef, useState} from 'react';
import { Column } from '@antv/g2plot';
import Room_T1 from "./Room_T1.jsx";
import {GetG2list, getzinfo} from "../../../../api/api.js";

const Room_T2 = () => {
    const chartContainerRef = useRef(null);
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await getzinfo();
                const responseData = response.data.data;
                setData(responseData);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, []);

    useEffect(() => {
        const columnPlot = new Column(chartContainerRef.current, {
            data,
            xField: 'buildName',
            yField: 'numStudents',
            label: {
                position: 'middle',
                style: {
                    fill: '#FFFFFF',
                    opacity: 0.6,
                },
            },
            xAxis: {
                label: {
                    autoHide: true,
                    autoRotate: false,
                },
            },
            meta: {
                buildName: {
                    alias: '寝室楼号',
                },
                numStudents: {
                    alias: '人数',
                },
            },
        });

        columnPlot.render();

        // Cleanup
        return () => {
            columnPlot.destroy();
        };
    }, [data]);

    return <div ref={chartContainerRef} />;
};

export default Room_T2;
